Hot Metal Pro 4.0/Hot Metal Pro 4.0.iso/Special/text/dtc.txt

Text File | 1997-11-17 | 14.4 KB | 414 lines

4. Design-Time Controls



A Design-Time Control is an ActiveX control that lets
you configure the content of your page, or an object
of some type that is embedded in the page.

NOTE: While the DTCs that are discussed in this chapter
are used for configuring HTML, applets, and scripts
in Web pages, DTCs can also be created for more general
purposes. There may be other DTCs registered on your
system which come from other companies and are used
for purposes besides editing Web pages.

When you insert a DTC with the HoTMetaL PRO Editor,
two things are inserted in your page:

1. The object or markup that the DTC configures.

2. The some code referring DTC itself, so that you can
open it at a later time to reconfigure the object that
was inserted. (This code is only displayed in HTML source
view.)

To insert a Design-Time Control in your document:

* Choose Design Time Control... from the Insert menu.


A dialog box that lists the Design-Time Controls registered
on your system appears.

* Double-click on a control in the list, or select a
control and click on [Insert].

A dialog box in which you can configure the applet,
script, or Dynamic HTML script using the DTC will appear.
The Properties dialog for the DTCs that ship with HoTMetaL
PRO will automatically be launched when you insert them.
For other DTCs, you may need to click on [Properties]
when you insert the DTC to access the DTC's Properties
dialog.

If a DTC has been inserted into your document, you can
re-open the Properties dialog for the DTC at any time.

To re-open the DTC Properties dialog:

*  Select the object or code inserted by the DTC and
choose Design Time Control... from the Insert menu,
or right-click inside the DTC and choose DTC Properties
from the pop-up menu.

To delete the DTC and the code that it inserted:

* Right-click inside the object or code inserted by
the DTC and choose Delete DTC from the pop-up menu.

You can also insert DTCs using the HoTMetaL FX chooser
.

The DTCs described in the sections that follow were
created by SoftQuad for use with the HoTMetaL PRO Editor.
There are other DTCs that come with HoTMetaL PRO; please
refer to the brief descriptions of the DTCs in the HoTMetaL
FX Chooser for details on what they are used for.

4.1. New Window Button

The functionality described in this topic is available
in HoTMetaL PRO 4.0, but not in the Evaluation Version
that you are now using. Choose `How To Purchase' in
the Help menu for ordering information.

The NewWndButton (new window button) DTC creates a JavaScript
that is called by clicking a button. When the button
is clicked in the browser a new browser window, displaying
a specified page, will appear.

To configure the new window:

* Turn on the desired New Window Features.

* Specify the width and height of the new window, in
pixels.

Button Label specifies the text that will be displayed
on the button. To specify the page that will be opened
when the button is pressed:

* Drag and drop a link to the Page to Open box or browse
for a file by clicking on [Browse...].

4.2. Shopping Cart

The functionality described in this topic is available
in HoTMetaL PRO 4.0, but not in the Evaluation Version
that you are now using. Choose `How To Purchase' in
the Help menu for ordering information.

Two DTCs configure the Shopping Cart. This is a quick
and easy method of setting up a page from which users
can `shop' on your system: they can select from products
or services that you specify, and fill their own `shopping
cart'. Users have control over their own shopping cart:
they can delete items, add items, etc. When a user is
finished loading up their cart, they can click on a
button that activates a CGI script, which could, for
example, send an acknowledgment to the user, and send
the order to your order-processing department.

There are four steps involved in setting up a Shopping
Cart:

* Use the  Shopping Cart DTC to create the Shopping
Cart kiosk.

* Use the  Shopping Cart Form DTC one or more times
to create a form for each product that you want to offer.

* Create a  CGI program to handle the data submitted
by the Shopping cart form.

* Finally, you can run the shopping cart  to check whether
you got the results you wanted.

4.2.1. Creating the Shopping cart kiosk

 Choose the Shopping Cart DTC to create the kiosk. The
kiosk is a frameset document consisting of two frames.

 The upper frame will contain the Shopping Cart console
document, which is also created by the Shopping Cart
DTC. The lower frame will contain one or more forms
for individual products, which you create using the
Shopping Cart Form DTC.

The console document consists of a JavaScript; when
this page is displayed in the browser, it shows a list
of all items selected. When a user selects an item from
one of the product forms in the lower frame, this choice
is added to a list in the console, and a running total
of purchases is updated. The console also has buttons
for clearing the list, deleting specific items, and
for indicating that the user has finished selecting
items.

The JavaScript in the console document also generates
an HTML form that is displayed in the lower frame of
the kiosk when the user clicks on the button indicating
that they have finished selecting items. This form lists
all of the user's selections, and the total cost. When
the user submits this form, the form's data will be
submitted to the CGI script that you specified.

* Enter the filename of the frameset page for the kiosk
in the first text box. The DTC will create this page
automatically. If you enter an existing filename, that
file will be overwritten; for this reason, if you wish
to create a customized kiosk page, you should do so
after running this DTC.

* Enter the filename for the console page in the second
text box. The DTC will create this page automatically.


* Enter the filename of a page containing (or containing
links to) forms for the individual products that you
wish to offer in the third text box. These forms are
generated using the Shopping Cart Form DTC.

* Enter the URL of the CGI script that will be called
when the user submits the Shopping Cart form.

When you click on [OK], the DTC inserts a link in the
current document, pointing to the kiosk (frameset) document.
You can choose to keep this link to refer to the kiosk,
or set up another link in another document. If you wish
to run the DTC again to edit the values you entered
above, you have to do so by clicking inside this link,
and then choosing DTC Properties... from the pop-up
menu, or Design Time Control... from the Insert menu.

4.2.2. Creating the Shopping Cart forms

Use the Shopping Cart Form DTC to create forms for individual
products that will be offered in the Shopping Cart kiosk.
You have to run the DTC once for each form you wish
to create; the form will be inserted into the current
document, but you can copy it to a different document
later. The forms must be in, or be in documents linked
to, the `Shopping Cart Form' document that you specified
in the Shopping Cart DTC. How you arrange the pages
and forms is up to you; the important thing is that
on each page, each form must have a unique name, as
explained below.

*  Each product's form must be given a unique name (one
that is not used for another form in the same page).
Enter the name for the current form in the Form Name
text box. (This value becomes the value of the NAME
attribute of the corresponding FORM element).

* Enter the name of the product in the Product Name
text box.

* Enter price of the product in the Unit Price text
box. This value must be a number without a currency
symbol (such as `$').

* The text in the Order button label will appear on
the button for this product in the order form.

* You can optionally enter some extra information about
the product. Do not surround this text with quotes.
This text not be displayed in the form but will be sent
to the CGI script.

4.2.3. Setting up the CGI script

The back-end CGI script to do the shopping cart processing
is not supplied with HoTMetaL PRO--there are many different
types of Web servers, each of which need slightly different
scripts configured in different ways.

This script must process the data from the final order
form. This data is in the standard format for form data--that
is, as a sequence of name/value pairs, where the name
and value are separated by `=', and the pairs are separated
by `&'. For example:

name1=value1&name2=value2&name3=value3

The data is organized as follows:

* For each product in the final order, two name/value
pairs are submitted:

1. The name in the first pair is the `product name'
for that product, as entered in the Shopping Cart Form
DTC.

2. The value in the first pair is the quantity of that
product that was ordered.

3. The name in the second pair is the same as the name
in the first pair, but with `.hidden' appended. For
example, `redshoes.hidden'.

4. The value in the second pair is the `extra information'
for that product, as entered in the Shopping Cart Form
DTC.

* The order in which the product data is submitted cannot
be predicted ahead of time, since it depends on which
products were chosen, and in which order.

* After the product data, a pair with name `total',
and value equal to the total value of the order, is
submitted.

Please see the links on CGI scripts on the `Technical
Reference' page, accessible from the `Help' menu, for
some places to go for more information on using and
configuring CGI scripts.

NOTE: Creating pages that can do online transactions
with credit cards and security is beyond the scope of
this manual. Please contact your Internet Service Provider
for more information.

4.2.4. Running the Shopping Cart

A user accesses the Shopping Cart by opening the kiosk
document in a browser. Initially, the kiosk contains
the console form in the top frame, and the order form
in the lower frame.

* To select a product, enter the quantity in the order
form and click on the corresponding button. The selection
is added to the list in the console.

* To delete a selection, select it in the console and
click on [Delete Item].

* To delete all selections, click on [Clear All Items]
in the console.

* If you wish to change the quantity of a product in
your order, enter the new quantity in the order form
and click on the button again. The new quantity replaces
the previous selection. For example, if you initially
selected two of something, and want to increase this
to five, enter `5' and click on the button again.

* When you have finished selecting items, click on [End
Shopping Trip]. This displays the final order form in
the bottom frame.

* If you are happy with your order, click on [Accept]
in the final order form. This send the form's data to
the CGI script.

4.3. Site Outliner

The functionality described in this topic is available
in HoTMetaL PRO 4.0, but not in the Evaluation Version
that you are now using. Choose `How To Purchase' in
the Help menu for ordering information.

Site Outliner is a dynamic HTML DTC, which is only supported
by Microsoft Internet Explorer 4.0. This DTC will create
an HTML file containing an outline of a Web site in
a format similar to the way that Windows Explorer displays
the contents of a folder. It uses SoftQuad's Web scanning
technology to determine the format of the site and then
produces dynamic HTML to create an outline.

To configure the Site Outliner DTC:

* Enter the base URL from which the scan starts in the
Site URL text box.

* Specify the icon image used for each page in the outline
in the Page Icon Image text box.

* Specify the icon image used for each folder in the
outline in the Folder Icon Image text box.

* Specify the file name of the page created to hold
the generated HTML of the outline in the Page for Outline
text box.

Once the text boxes are filled in:

* Select Start Scanning to do the scan.

When the Scanning Status box displays Done scanning,
click on [OK].

4.4. Toggle button

The functionality described in this topic is available
in HoTMetaL PRO 4.0, but not in the Evaluation Version
that you are now using. Choose `How To Purchase' in
the Help menu for ordering information.

The Toggle button DTC creates a JavaScript that toggles
between two images when you click on it. You can also
link another JavaScript into this button so that it
will be triggered on the mouse click.

To configure the Toggle Button DTC:

* Enter the path to the `on' and `off' images in the
text boxes provided.

* Give this control a Button ID so that it can be invoked
by JavaScript.

* In the Java Script function name text box, you can
enter the name of another JavaScript that is called
when you click on the toggle button.

The check box at the bottom of the dialog tells the
DTC not to insert another copy of the the Toggle Button
script if you already have a toggle button script in
your page.

4.5. Web Tour

The functionality described in this topic is available
in HoTMetaL PRO 4.0, but not in the Evaluation Version
that you are now using. Choose `How To Purchase' in
the Help menu for ordering information.

With the Web Tour DTC, you can create an automated tour--a
kind of Web page slide show--for any collection of files
that can be displayed in a Web browser (HTML, GIF, JPEG,
etc.). You need to specify a kiosk page; that is, the
page that hosts the Web tour and defines its format.


To configure the Web Tour DTC:

* Enter or browse for the page where the tour script
will be inserted, in the Tour Control Page text box.

* Select the format for the tour in the Tour Kiosk Format
section of the dialog. The tour can be formatted in
one of two ways:

1. A frame set, with the controls in one frame and the
pages in another.

2. A floating window with controls, and the tour pages
and images appearing in the main window.

* Select the appropriate radio button and enter the
file name for the kiosk page.

* Add URLs to the Pages for the tour list.

* Click on [Add] and [Remove] to specify which pages
are in the tour by editing the Pages for the tour list.

 When you click on the [Edit] button, a dialog for entering
information specific to that page appears. You can specify
a delay time--the amount of time the page will be displayed,
in seconds (the default is 10)--and a caption.